.login-container{width: 90%; border:1px solid #ff00ff;}

/*
  ///////////////////////////////////////////////////
  ========== Start Common UI Component ==========
  ///////////////////////////////////////////////////
*/

.white{
  color: #fff;
}
.lightgreen {
  color: #69b47b;
}
.green {
  color: #00a264;
}
.orange {
  color: $orange;
}
.lightgrey {
  color: #8A8A8A;
}
.darkgrey {
  color: #4D4D4D;
}
.lightblue {
  color: #3498db;
}
.darkblue {
  color: #0079BF;
}
.red {
  color: #d9534f;
}

/*
  /////////////////////////////////////
  Common
  /////////////////////////////////////
*/

html,body{
  font-size: 16px;
  font-family: '微软雅黑';
  line-height: 26px;
  color: #333;
  background: #f8fafb;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: #777777;
  font-weight: 200;
  &:focus{
    text-decoration: none;
  }
  &.active{
    color: #00a264;
  }
}

p {
  margin: 0 0 10px;
  padding: 0;
}

b,strong{
  font-family: "bold", arial, helvetica, sans-serif;
}

.fwb{
  font-family: "bold", arial, helvetica, sans-serif;
}

.fwn{
  font-family: "regular", arial, helvetica, sans-serif;
}

.vam{
  vertical-align: middle;
}
.vat{
  vertical-align: top !important;
}
.vab{
  vertical-align: bottom;
}

.tac{
  text-align: center;
}
.tal{
  text-align: left;
}
.tar{
  text-align: right;
}
.vam{
  vertical-align: middle;
}

.p0{
  padding: 0;
}
.p10{
  padding: 10px;
}
.p20{
  padding: 20px;
}
.p30{
  padding: 30px;
}
.pl15{
  padding-left: 15px;
}

.mb0 { margin-bottom: 0px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb40 { margin-bottom: 40px; }
.mb60 { margin-bottom: 60px; }
.mb80 { margin-bottom: 80px; }
.mb160 { margin-bottom: 160px; }

.mt0 { margin-top: 0px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }
.mt80 { margin-top: 80px; }
.mt130 { margin-top: 130px; }
.mt160 { margin-top: 160px; }

.mr0 { margin-right: 0px; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr80 { margin-right: 80px; }
.mr180 { margin-right: 180px; }

.ml0 { margin-left: 0px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml40 { margin-left: 40px; }
.ml60 { margin-left: 60px; }
.ml80 { margin-left: 80px; }
.ml180 { margin-left: 180px; }

.container {
  max-width: 970px;
}
.container-lg{
  max-width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  &:before,
  &:after {
    display: table;
    content: " ";
    clear: both;
  }
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.hide-xs{
  display: none;
}

.full{
  width: 100%;
}

.dib{
  display: inline-block;
}
.di{
  display: inline;
}
.w40p{
  width: 40%;
}
mark {
  color: inherit;
  background: #ffde6f;
}
.center-block{
  margin: 0 auto;
}
.br0{
  border-right:0 !important;
}

/*
  /////////////////////////////////////
  Buttons
  /////////////////////////////////////
*/

/*
  Buttons size
*/

.btn{
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  height: inherit;
  padding: 10px 20px;
  border-radius: 4px;
}

.btn-sm{
  font-size: 12px;
  padding: 6px 12px;
  border-bottom-width: 1px;
  font-weight: normal;
}

.btn-full{
  width: 100%;
}

.btn-xs-full{
  width: 100%;
}

/*
  Buttons style
*/

.btn-icon-dashed{
  color: #777;
  padding: 0;
  background: transparent;
  &:hover,
  &:active,
  &:focus{
    background:transparent;
    outline: none;
    box-shadow: none;
  }
  .icon-dashed{
    color: #777;
    display: inline-block;
    border: 1px dashed #777;
    padding: 15px 10px;
    border-radius: 50%;
    vertical-align: middle;
    i{
      display: block;
      line-height: 0;
    }
  }
}
.btn-default{
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: #777 !important;

  &:hover,
  &:focus{
    background: #eaeaea;
    border-color:transparent;
    color: #FFF;
  }
}
.btn-grey{
  background: #ccc;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  color: #fff !important;

  &:hover,
  &:focus{
    background: #bbb;
    border-color:transparent;
    color: #FFF;
  }
}
.btn-detail{
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
  font-family: bold;
  font-size: 14px;


  &:hover,
  &:focus{
    background: #eee;
  }
}
.btn-white{
  background: #fff;
  color: #444 ;
  border: 1px solid #cccccc;
  border-radius: 4px;
  border-bottom: 2px solid #cccccc;

  &:hover,
  &:focus{
    opacity: 1;
    background: #eaeaea;
    border-bottom: 2px solid #cccccc;
    color: #444;
  }
}
.btn-white-txt-green{
  background: #fff;
  color: #00a264;
  @include transitional(0.1s);
  &:hover,
  &:focus{
    opacity: 1;
    color: #fff;
    background: #69b47b;
  }
}
.btn-add{
  background: #00a765;
  color: #FFF !important;
  border: 1px solid transparent;
  border-radius: 100%;
  width:30px;
  height:30px;
  padding:0;
  text-align: center;
  line-height:29px;
  font-size:15px;
  &:hover,
  &:focus{
    opacity: 1;
    background: #00874f;
    border-bottom: 2px solid #006d42;
    color: #FFF;
  }
}
.btn-submit{
  background: #00a765;
  color: #FFF !important;
  border: 1px solid transparent;
  border-radius: 4px;
  border-bottom: 2px solid #006e42;

  &.btn-sm,
  &.btn-no-border{
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }

  &:focus,
  &:hover{
    opacity: 1;
    background: #00874f;
    border-bottom: 2px solid #006d42;
    color: #FFF;
  }
}
.btn-green{
  background: #00a765;
  color: #FFF !important;
  border: 1px solid transparent;
  border-radius: 4px;

  &.btn-sm,
  &.btn-no-border{
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }

  &:focus,
  &:hover{
    opacity: 1;
    background: #00874f;
    color: #FFF;
  }
}
.btn-orange{
  background: #FF6A00;
  color: #FFF !important;
  border: none;
  border-radius: 4px;
  border-bottom: 2px solid #B54F26;

  &:hover,
  &:focus{
    background: #E75200;
    margin-top: 1px;
    border-bottom: 1px solid #B54F26;
    color: #FFF;
  }
}
.btn-danger,
.btn-success{
  color: #fff !important;
}
/*
  /////////////////////////////////////
  Inputs
  /////////////////////////////////////
*/
.input-group-addon{
  background: transparent;
}
.hidden-input-text{
  border: 0;
  color: #4D4D4D;
  &:focus{
    outline-width: 0;
  }
}
.form-inline.m0{
  .form-group{
    margin: 0;
  }
}
.form-control {
  font-size: 16px;
  line-height: normal;
  padding: 10px 15px;
  height: inherit;
  border: 1px solid #CCC;
  color: #444444;
  box-shadow: none;
  &.form-no-shadow{
    box-shadow: none;
    padding: 10px 15px;
  }
  &.form-lg{
    padding: 10px 15px;
  }
}

.help-block {
  font-size: 14px;
}

.select-wrapper,.search-wrapper{
  position: relative;
  i {
    position: absolute;
    top: 11px;
    right: 12px;
    color: #8A8A8A;
    font-size: 14px;
  }
  select {
    height: 38px;
    padding: 5px 20px 5px 10px;
    text-indent: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}
.input-group-addon.select-wrapper{
  padding-top: 0;
  padding-bottom: 0;
  .form-control{
    padding: 0;
    border: 0;
    box-shadow: none;
    height: 36px;
  }
}

/*
  /////////////////////////////////////
  Labels
  /////////////////////////////////////
*/

label {
  display: inline-block;
  font-family: "bold", arial, helvetica, sans-serif;;
}
.label-checkbox label{
  font-family: "regular", arial, helvetica, sans-serif !important;
}
.label{
  font-size: 16px;
  line-height: 16px;
}
.label-sm{
  padding: 6px 12px;
  line-height: normal !important;
}
.label-default,
.label-red,
.label-green,
.label-grey{
  display: inline-block;
  border-radius: 5px;
  padding: 6px 20px;
}
.label-red{
  background-color: #d9534f;
}
.label-green{
  background: #69b47b;
}
.label-grey{
  background: #8a8a8a;
}
.label-light-green{
  color: #fff;
  padding: 2px 10px;
  line-height: normal;
  background: #69b47b;
  border-radius: 5px;
}
.label-square{
  border-radius:4px;
}
.label-pending{
  background: #dfb44b;
  font-size: 12px;
  vertical-align: middle;
  display: inline-block;
  line-height: 0;
  padding: 11px 10px;
  margin-right: 5px;
}

/*
  /////////////////////////////////////
  Switchbar
  /////////////////////////////////////
*/

.switchbar {
  position: relative; width: 60px;
  -webkit-user-select: none; -moz-user-select:none; -ms-user-select: none;
  &.payroll{
    width: 117px;
    .switchbar-switch{
      right: 100px;
      left: 0;
    }
    .switchbar-checkbox:checked + .switchbar-label .switchbar-switch {
      right: 0 !important;
      left:89px;
    }
    .switchbar-inner:before {
      content: "EARNING";
    }
    .switchbar-inner:after {
      content: "DEDUCTION";
    }
  }
}
.switchbar-checkbox {
  display: none;
}
.switchbar-label {
  display: block; overflow: hidden; cursor: pointer;
  border: none; border-radius: 30px;
}
.switchbar-inner {
  width: 200%; margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.switchbar-inner:before, .switchbar-inner:after {
  float: left; width: 50%; height: 22px; padding: 0;
  font-size: 11px; color: white;
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  border-radius: 30px;
  line-height: 24px;
}
.switchbar-inner:before {
  content: "ON";
  padding-left: 11px;
  background-color: #68c3a3; color: #FFFFFF;
  border-radius: 30px 0 0 30px;
  padding-right: 30px;
}
.switchbar-inner:after {
  content: "OFF";
  padding-right: 11px;
  background-color: #cd0001; color: #fff;
  text-align: right;
  border-radius: 0 30px 30px 0;
}
.switchbar-switch {
  width: 24px; margin: 2px;
  background: #FFFFFF;
  border: none; border-radius: 30px;
  position: absolute; top: 0; bottom: 0; right: 32px;
  -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}

.switchbar-checkbox:checked + .switchbar-label .switchbar-inner {
  margin-left: 0;
}
.switchbar-checkbox:checked + .switchbar-label .switchbar-switch {
  right: 0px;
}

/*
  /////////////////////////////////////
  Table
  /////////////////////////////////////
*/

table{
  table-layout: fixed;
  &.table thead>tr>th{
    border: 0;
  }
  td{
    vertical-align: top;
  }
}
th {
  font-weight: normal;
}
.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td{
  border-top: 0;
  border-bottom: 1px solid #ddd;
}
.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td{
  padding: 8px 10px;
}

/*
  /////////////////////////////////////
  Progressbar
  /////////////////////////////////////
*/

.progress{
  background: #ccc;
  color: #fff;
  height: 10px;

  .progress-bar{
    background: #69b47b;
  }
  .total,
  .remain{
    display: block;
    font-size: 12px;
    line-height: 12px;
    padding: 0 10px;
    height: 10px;
  }
}

/*
  /////////////////////////////////////
  Tab bar
  /////////////////////////////////////
*/

.tab-bar {
  text-align: center;
  border-bottom: 1px solid #d7e1e6;
  margin: 0;
  padding:  0 20px;

  li {
    display: inline-table;
    float: inherit;
    font-weight: 700;
    margin-left: 1px;
  }

  & > li > a {
    font-size: 14px;
    padding: 5px 10px;
    color: #3c3c41;
  }

  & > li.active > a,
  & > li.active > a:hover,
  & > li.active > a:focus {
    border-color: #d7e1e6;
    border-bottom-color: transparent;
    border-top: 4px solid #f07f06;
  }

  & > li > a:hover {
    background: #d7e1e6;
    border-color: transparent;
  }
}

.tab-green {
  text-align: center;
  margin: 0;
  border-bottom: 0;
  font-size: 0;
  padding: 0;
  li {
    display: inline-block;
    float: inherit;
    font-weight: 700;
    margin: -1px;
  }

  li:first-child a{
    border-top-left-radius:5px !important;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    border-bottom-left-radius:5px !important;
  }
  li:last-child a{
    border-top-left-radius:0;
    border-top-right-radius:5px !important;
    border-bottom-right-radius:5px !important;
    border-bottom-left-radius:0;
  }

  & > li > a {
    font-size: 16px;
    padding: 10px 40px;
    color: #777 !important;
    background: #eee;
    border-radius: 0;
    font-family: bold;
  }

  & > li.active > a,
  & > li.active > a:hover,
  & > li.active > a:focus {
    border: 1px solid #69b47b !important;
    background: #69b47b;
    color: #fff !important;
  }

  & > li > a:hover {
    background: #d7e1e6;
    border-color: transparent;
  }
}

/*
  /////////////////////////////////////
  Notif
  /////////////////////////////////////
*/
.notif-fixed{
  background: #00a264;
  color: #fff;
  width: 100%;
  top:-100px;
  position: fixed;
  padding: 20px;
  @include transitional(0.5s);
  &.active{
    top:0%;
  }
  .container{
    position: relative;
  }
  a{
    text-decoration: underline;
    color: #fff;
  }
}

/*
  /////////////////////////////////////
  Checkbox
  /////////////////////////////////////
*/
.check-square-box{
  width: 25px!important;
  height: 25px!important;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 4px;
  background: #fff;
  outline: none;
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  cursor: pointer;

  .check-square-item{
    visibility: hidden;
  }

  &.active {
    background: url(../img/check.png) no-repeat;
    background-size: contain;
    background-position: center;
  }
  &:hover{
    border:1px solid #aaa
  }
}
.check-square {
  width: 25px!important;
  height: 25px!important;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 4px;
  background: #fff;
  outline: none;
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  cursor: pointer;

  &:hover,
  &:focus {
    border-color: #686868;
  }

  &:checked {
    background: url(../img/check.png) no-repeat;
    background-size: contain;
    background-position: center;
  }
}

/*
  /////////////////////////////////////
  Thumbnail
  /////////////////////////////////////
*/
.img-responsive{
  display: inline-block;
}
.img{
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;

  &:focus{
    outline: 0;
  }

  &.img-30{
    img,.img-empty{
      width: 30px;
      height: 30px;
    }
    .img-empty-text span{
      font-size: 12px;
    }
  }
  &.img-50{
    img,.img-empty{
      width: 50px;
      height: 50px;
    }
    .img-empty-text span{
      font-size: 16px;
    }
  }
  &.img-60{
    img,.img-empty{
      width: 60px;
      height: 60px;
    }
    .img-empty-text span{
      font-size: 18px;
    }
  }
  &.img-100{
    img,.img-empty{
      width: 100px;
      height: 100px;
    }
    .img-empty-text span{
      font-size: 30px;
    }
  }
  &.img-150{
    img,.img-empty{
      width: 150px;
      height: 150px;
    }
    .img-empty-text span{
      font-size: 60px;
    }
  }
  .img-empty{
    position: relative;
    text-align: center;
  }
  .img-empty-text{
    text-transform: uppercase;
    position: absolute;
    top:50%;
    right: 0;
    bottom: 50%;
    left: 0;
    margin: auto;
    background: #000;
    font-family: "regular", arial, helvetica, sans-serif;
    letter-spacing: 1px;
    span{
      display: block;
      line-height: 0;
      width: 100%;
    }
  }
}
.img-50.mr5{
  margin-bottom: 10px;
}
.img-rounded{
  border-radius:50%;
}

/*
  /////////////////////////////////////
  Alert
  /////////////////////////////////////
*/

.alert{
  padding: 10px;
  border-radius: 3px;
}
.alert-blue{
  color: #fff;
  background: #3498db;
  a{
    color: #fff;
  }
}
.alert-border-green{
  border: 4px solid #00a765;
  background: #00a765;
  border-radius: 4px;
  color: #fff;
}
.alert-yellow{
  display: block;
  background: #fff9d1;
  color: #ba5d15;
  border: 1px solid #f0bd96;
}

/*
  /////////////////////////////////////
  Typo
  /////////////////////////////////////
*/

p{
  a{
    cursor: pointer;
    color: #1c5c76;
    text-decoration: underline;
  }
}
h1, h2, h3, h4 {
  font-family: "bold", arial, helvetica, sans-serif;
  margin: 0 0 10px;
  line-height: normal;
}
h1 {
  font-size: 22px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 16px;
}
h5 {
  font-size: 14px;
  line-height: 21px;
}
h6 {
  font-size: 12px;
}

.s12{
  font-size: 12px;
}
.s14{
  font-size: 14px;
  line-height: 21px;
}
.s16{
  font-size: 16px;
  line-height: 26px;
}
.s18{
  font-size: 18px;
  line-height: 30px;
}
.s20{
  font-size: 20px;
  line-height: 28px;
}
.s22{
  font-size: 22px;
  line-height: 30px;
}
.s24{
  font-size: 24px;
  line-height: 32px;
}
.s26{
  font-size: 26px;
  line-height: 34px;
}
.s30{
  font-size: 30px;
  line-height: 40px;
}
.s36{
  font-size: 36px;
  line-height: 40px;
}
.s42{
  font-size: 42px;
  line-height: 50px;
}
.s48{
  font-size: 48px;
  line-height: 55px;
}
.s60{
  font-size: 60px;
  line-height: 65px;
}
.s160{
  font-size: 160px;
  line-height: 160px;
}

.lhn{
  line-height: normal;
}

.lp-05{
  letter-spacing: -.05em;
}

.txt-link{
  color: #0645ad;
  text-decoration: underline;
  &:hover,
  &:active,
  &:visited{
    color: #063883;
    text-decoration: underline;
  }
}
.txt-white{
  color: #fff;
  text-decoration: none;
  &:hover{
    color: #fff;
  }
}
.txt-default{
  color: #3C3C41;
  text-decoration: none;
}
.txt-dgrey-bold{
  font-family: "bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
  letter-spacing: -.05em;
  font-size: 40px;
}
.txt-orange{
  color: $orange;
}
.txt-orange-caps{
  color: $orange;
}
.txt-green-caps{
  color: #69b47b;
  text-transform: uppercase;
}
.txt-red{
  color: #dc3d3d;

}
.txt-grey{
  color: #8A8A8A;
}
.txt-lgrey{
  color: #b1b1b1;
}
.txt-green{
  color: #00a264;
}
.txt-color-green{
  color: #00a264;
}
.txt-light-green{
  color: #69b47b;
}
.txt-color-red{
  color: #c85555;
}

/*
  /////////////////////////////////////
  Tooltip
  /////////////////////////////////////
*/
.tooltip-container{
  position: relative;

  .tooltip-area{
    position: absolute;
  }
}

/*
  /////////////////////////////////////
  Step Breadcrumb circle
  /////////////////////////////////////
*/
.breadcrumb-circle-padding{
  padding: 0 40px;
}
.breadcrumb-circle-wrap{
  display: table;
  width: 100%;


  .breadcrumb-circle-step{
    position: relative;
    display: table-cell;
    color: #777;
    text-align: center;

    &.active{
      .breadcrumb-circle,
      .breadcrumb-title{
        color: #777;
        border-color: #777;
      }
      .breadcrumb-line-left{
        border-color: #777;
      }
    }
    &.complete{
      .breadcrumb-circle{
        color: #fff;
        background: #f08343;
        border-color: #f08343;
      }
      .breadcrumb-title{
        color: #777;
        border-color: #777;
      }
      .breadcrumb-line-right,
      .breadcrumb-line-left{
        border-color: #777;
      }
    }
  }
  .breadcrumb-circle{
    position: relative;
    display: inline-block;
    height: 50px;
    width: 50px;
    font-size: 20px;
    line-height: 50px;
    background: #fff;
    color: #ddd;
    border: 2px solid #ddd;
    border-radius:100%;
    z-index: 9;
  }
  .breadcrumb-title{
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    color: #ddd;
  }
  .breadcrumb-line-left,
  .breadcrumb-line-right{
    position: absolute;
    display: block;
    top: 25px;
    height: 0;
    width: 50%;
    border-top: 2px solid #ddd;
    z-index: 2;
  }
  .breadcrumb-line-left{
    left: 0;
  }
  .breadcrumb-line-right{
    right: 0;
  }
}

/*
  /////////////////////////////////////
  Step Breadcrumb
  /////////////////////////////////////
*/
.step-breadcrumb-wrap{
  padding-right: 20px;
}
.step-breadcrumb{
  a:hover{
    opacity: 1;
  }
  .step-breadcrumb-item-wrap{
    padding: 0;
  }
  .step-breadcrumb-item-wrap:nth-child(1){
    .step-breadcrumb-item{
      padding-left: 15px;
      border-radius: 10px 0 0 10px;
    }
  }
  .step-breadcrumb-item{
    position: relative;
    display: block;
    padding: 5px 10px 5px 30px;
    border: 2px solid #eee;
    border-right: 0;
    color: inherit;
    &:hover{
      background: #eee;
      &:after{
        background: #eee;
      }
    }
    &.active{
      color: #fff;
      background: #00a264;
      border-color: #00a264;
      &:after{
        background: #00a264;
        border-color: #00a264;
      }
    }

    &:after{
      display: block;
      position: absolute;
      width: 26px;
      height: 26px;
      right: -13px;
      top: 50%;
      margin-top: -13px;
      background: #fff;
      content: " ";
      border-top: 2px solid #eeeeee;
      border-right: 2px solid #eee;
      @include rotate(45deg);
      z-index: 8;
    }
  }
}

/*
  /////////////////////////////////////
  HR
  /////////////////////////////////////
*/
hr{
  &.dark{
    border-color: #d7e1e6;
  }
  &.divider-25{
    margin-left: -5px;
    margin-right: -5px;
  }
}

/*
  /////////////////////////////////////
  PROFILE
  /////////////////////////////////////
*/
.career-timeline-wrap{
  display: table;
}
.career-timeline-item{
  position: relative;
  display: table-row-group;
  font-size:14px;
  .col-view{
    display: table-cell;
  }
  .img{
    margin-left:20px;
    margin-right:20px;
  }
  &:nth-last-child(1){
    .timeline-line:after{
      display: none;
    }
  }
}
.career-timeline-img{
  text-align: center;
  position: relative;
  padding-bottom:30px;
}
.timeline-line{
  &:after{
    display: block;
    position: absolute;
    content: '';
    width:1px;
    height:100%;
    left:0;
    right:0;
    margin:auto;
    background: #cccccc;
  }
}
.restricted-panel{
  cursor: pointer;
}
.restricted-wrap{
  .restricted-show{
    display: none;
  }
  &.active{
    .restricted-hide{
      display: none;
    }
    .restricted-show{
      display: block;
    }
  }
}
.apply-time-off{
  border: 1px solid #e2e5e6;
  background: #f8fafb;
  padding: 20px;
  width: 100%;
  display: inline-block;
  border-radius: 6px;
}
.staff-picture{
  display: inline-block;
  position: relative;
  &:hover,
  &:hover,
  &:hover:after,
  &:hover:before{
    opacity: 1;
  }
  &:after{
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #00a264;
    top:0;
    border-radius: 100%;
    opacity: 0;
    @include transitional(0.5s);
  }
  &:before{
    display: block;
    position: absolute;
    content: "\f030";
    width: 25px;
    height: 25px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    font-family: "FontAwesome", sans-serif;
    z-index: 9;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    opacity: 0;
    @include transitional(0.5s);
  }
}
.claim-list{
  h4{
    display: inline-block;
  }
}
.file-list{
  .panel{
    margin-bottom: 0;
  }
  .file-item{
    border-top: 1px solid #ccc;
    padding: 20px 0;
    &:first-child{
      border-top: 0;
    }
  }
}
.modal-payslip{
  font-size: 14px;
  input,
  .form-control{
    font-size: 14px;
  }
  .padding-head{
    padding: 40px 40px 0 40px;
  }
  .padding-content{
    padding: 0 40px;
  }
  .padding-foot{
    padding: 0 40px 40px 40px;
  }
  .modal-content{
    min-height: 600px;
    border:0;
    border-radius: 0;
    box-shadow: 0px 1px 1px 0px #aaa;
    &:before,
    &:after{
      display: block;
      position: absolute;
      width: 50px;
      height: 100%;
      top:0;
      content: "";
    }
    &:before{
      left: 0;
    }
    &:after{
      right: 0;
    }
    .modal-body{
      padding: 0 !important;
    }
  }
  .form-group{
    margin-bottom: 5px;
  }
  .label-red{
    font-size: 14px;
    margin: 0 10px;
  }
  .modal-dialog{
    max-width: 640px;
  }
}
.modal-action{
  text-align: center;
  margin-top: 20px;
  font-family: "bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.payslip-table-preview{
  td{
    border-bottom:0 !important;
  }
  .label-type{
    background: #d5dadc;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 10px;
    display: inline-block;
    text-align: center;
  }
}
/*
  /////////////////////////////////////
  Launchpad
  /////////////////////////////////////
*/
.account-item{
  padding: 20px 0px;
  border-top: 1px solid #eee;
  &:first-child{
    border-top: 0;
  }
  .account-thumbnail-wrap{
    width: 60px;
  }
  .account-thumbnail{
    position: relative;
  }
  .initial{
    position: absolute;
    height: 30px;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: #fff;
    font-family: "bold", arial, helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
  }
  img{
    width: 40px;
  }
  h3{
    margin-bottom: 0;
    font-size: 20px;
  }
}
/*
  /////////////////////////////////////
  Bamboohr
  /////////////////////////////////////
*/
.header-green{
  background: #009b5b;
  margin-bottom: 40px;
  padding: 60px 0 0 0;
  color: #fff;
}
.table-compare {
  .form-group{
    padding: 10px;
    margin-bottom: 0;
    border-top: 1px solid #ccc;
    &:first-child{
      border-top: 0;
    }
  }
  label{
    margin-bottom: 0;
  }
  .fa{
    font-size: 25px;
  }
}
/*
  /////////////////////////////////////
  Pricing
  /////////////////////////////////////
*/
.header-pricing{
  background: #009b5b;
  margin-bottom: 40px;
  padding: 60px 0;
  color: #fff;
}
.pricing-panel-white{
  border-radius:8px;
  background: #fff;
  color: #333;
  padding: 30px 20px;
}
.tab-link{
  text-align: center;
  a{
    padding: 20px 20px;
    display: inline-block;
    background: #eee;
    &:hover{
      background: #ddd;
    }
    &.active{
      color: #fff;
      background: #f7aa5c;
    }
    &:first-child{
      border-radius:5px 0 0 5px;
    }
    &:last-child{
      border-radius:0 5px 5px 0;
    }
  }
}


/*
  ///////////////////////////////////////////////////
  ========== End Common UI Component ==========
  ///////////////////////////////////////////////////
*/

/*
  ///////////////////////////////////////////////////////
  ========== Start Spesific UI Component ==========
  ///////////////////////////////////////////////////////
*/

/*
  General
*/
body{
  @include transitional(0.4s);
}
.menu-xs-close{
  position: relative;
  left: 0;
}
.menu-xs-open{
  position: relative;
  left: 0;
  right: 0;
  top:0;
  bottom:0;
  overflow: hidden;
}
.logo-mark {
  font-size: 36px;
  line-height: 30px;
  letter-spacing: -.05em;
  color: #00a264;
  font-family: "bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  a{
    font-family: "bold", "Helvetica Neue", Helvetica, Arial, sans-serif;

  }
  &.logo-white{
    color: #fff;
  }
  &.logo-big{
    font-size: 78px;
  }
}
.ovh{
  overflow: hidden;
}
.dib{
  display: inline-block;
}
.txt-bold{
  font-family: bold;
}
.modal{
  background:rgba(248,250,251,0.9);
}
.col-no-padding{
  padding:0;
}

/*
  Header
*/
header{
  padding-top:20px;
}
.img-circle.dropdown-toggle{
  cursor: pointer;
}
.nav-mobile{
  position: fixed;
  background: #fff;
  top:0;
  width: 100%;
  z-index: 8;
  border-bottom: 1px solid #dfdfdf;
  .logo-mark-mobile{
    color: #242345;
    margin-top: 13px;
    font-size: 16px;
  }
}
.nav-mobile-menu{
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1040;
  background: #63b482;
  .title {
    display: block;
    font-size: 13px;
  }
  .fa{
    font-size:25px;
  }
  ul{
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    li{
      display: table-cell;
      width: 25%;
      text-align: center;
      &.active{
        a{
          color: #fff;
        }
        .fa-line-more:before,
        .fa-line-more:after{
          background-color: #fff;
        }
      }
    }
    a{
      display: block;
      padding: 10px 0 1px;
      font-size: 20px;
      color: #bdddc6;
      &:hover{
        opacity: 1;
        color: #fff;
        .fa-line-more:before,
        .fa-line-more:after{
          background-color: #fff;
        }
      }
    }
  }
  .fa-line-more{
    &:before,
    &:after{
      display: block;
      width: 25px;
      height: 5px;
      background: #777;
      content: "";
      border-radius: 5px;
      margin-left: auto;
      margin-right: auto;
    }
    &:before{
      margin-bottom: 5px;
    }
    &:after{
      margin-top: 5px;
    }
    &:hover{
      color: #fff;
    }
  }
}

/* Profil Picture*/
.user-snap-wrap{
  .user-snap{
    margin: 7px 0;
  }
  .pic-user{
    margin-left: 10px;
  }
  .dropdown-menu{
    padding: 7px 0;
    background: #fff;
    border: 1px #d2d2d2 solid;
    border-radius: 3px;
    right: 7px;
    top: 55px;
    z-index: 1102;
    box-shadow: none;
    width: 90px;
    a{
      color: #333;
      font-size: 14px;
    }
    .fa{
      margin-right: 5px;
    }
    a:hover,
    a:focus{
      background: transparent;
      color: #434343;
    }
    &:before{
      display: block;
      position: absolute;
      content: ' ';
      top:-9px;
      right: 15px;
      width: 15px;
      height: 15px;
      background: #fff;
      border-top: 1px #d2d2d2 solid;
      border-right: 1px #d2d2d2 solid;
      @include rotate(-45deg);
    }
    li > a{
      padding: 5px 15px;
    }
    .divider{
      margin: 5px 0;
    }
  }
}
.xs-pull-right{
  float: right;
}
.col-menu-xs,
.logo-platform{
  display: inline-block;
  margin-right: 10px;
}
.user-greeting{
  display: none;
}

// Public beta badge
.publicbeta-badge{
  width: 150px;
  position: fixed;
  z-index: 10;
  top:0;
  right: 0;
  img{
    width: 100%;
  }
}

/*
  Content
*/
.content{
  padding: 20px 15px;
  border: 3px solid #69b47b;
  border-radius: 10px;
  background: #FFF;
  min-height: 500px;
  a,
  .task-to-complete .link{
    cursor: pointer;
    color: #1c5c76;
    text-decoration: underline;
  }
  .btn,
  .btn-sm,
  .panel-heading a,
  .tab-green a,
  .dropdown-menu a,
  .staff-grid-item a,
  .txt-default,
  .add-user-popover a{
    text-decoration: none !important;
    color: inherit;
  }
  ul.dot-list{
    padding-left: 15px;
  }
}
.content-padder{
  margin: auto -15px;
  //  padding: 0 35px 20px 35px;
}
.content-padder-border{
  margin: auto -15px;
  padding: 0 15px 20px 15px;
  border-bottom: 2px solid #EFF3F5;
}
.header-content{
  position: relative;
  font-size: 18px;

  h2{
    font-size: 24px;
  }
  .title{
    margin-bottom: 0;
  }
  .excerpt{
    display: none;
  }
  .btn-corner{
    position: absolute;
    right: 20px;
    top: -5px;
  }
}

/*
  Activity Log
*/
.notice-activity-log{
  .log{
    font-size: 14px;
    padding-left: 15px;
  }
  a {
    color: #8A8A8A;
  }
}

/*
  Sidebar
*/
@media (max-width: 768px) {
  .col-menu-xs,
  .logo-platform{
    margin-right: 0px;
  }
  .panel-login{
    .panel-form{
      padding: 10px 15px !important;
    }
  }
  .table-responsive{
    padding: 0 10px;
  }
  .tab-content{
    .form-control-static{
      padding-top: 0;
    }
  }
  .header-content{
    padding-bottom: 10px;
  }
  .nav-sidebar{
    overflow-y: auto;
    position: fixed;
    top:0;
    width: 90%;
    padding-top: 10px;
    background: #fff;
    border-right: 1px solid #eee;
    z-index: 9;
  }
  .tab-link{
    border-radius: 5px;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    a{
      border-radius: 0 !important;
    }
  }
  body{
    &.menu-xs-close{
      .nav-sidebar-cover{
        right: -90%;
      }
      .nav-sidebar{
        left:-90%;
      }
    }
    &.menu-xs-open{
      .nav-sidebar-cover{
        right: 0%;
      }
      .nav-sidebar{
        left: 0%;
      }
    }
  }
}
@media (max-width: 991px) {
  body{
    padding-top: 10px;
    padding-bottom: 77px;
    & > .container{
      padding-right: 10px;
      padding-left: 10px;
    }
  }
  .content{
    border-radius: 5px;
  }
  .hide-mobile{
    display: none;
  }
  // Intercom
  #intercom-container .intercom-launcher{
    bottom: 75px !important;
  }
  h1.s36{
    font-size: 24px;
  }
  .modal-body{
    padding: 10px;
  }
  .header-content{
    margin-bottom:20px;
  }

  .tab-green {
    li:first-child a {
      border-top-left-radius: 3px !important;
      border-bottom-left-radius: 3px !important;
    }
    li:last-child a {
      border-top-right-radius: 3px !important;
      border-bottom-right-radius: 3px !important;
    }
  }
}
.nav-sidebar-cover{
  display: block;
  position: fixed;
  right: 0;
  top:0;
  width: 10%;
  height: 100%;
  background: transparent;
  z-index: 999;
}
.nav-sidebar{
  display: none;
  height: 100%;
  @include transitional(0.4s);

  .nav-menu{
    position: relative;
    text-align: right;
    .menu-ico{
      img,svg {
        width: 19px;
        height: 18px;
        margin-left: 11px;
        vertical-align: middle;
      }
    }

    ul{
      padding: 0;
    }
    li{
      list-style: none;
      padding: 0;

      a{
        display: block;
        font-size: 18px;
        text-align: right;
        font-weight: 200;
        padding: 15px 5px 12px 0;
        color: #777777;

      }
      &.active{
        a{
          color: #3c3c41;
        }
        .fa,
        circle,
        line,
        path{
          color: #f08343;
          stroke: #f08343;
        }
      }
    }
    .fa{
      width: 30px;
    }
  }
}

/*
  List Task
*/
.header-task{
  margin: 10px 0 0 0;
  padding:0 15px;
}
#collapseaddtask{
  padding:0 15px;
}
.drop-add-task{
  position: relative;

  //  &:before{
  //    content: " ";
  //    display: block;
  //    position: absolute;
  //    top:-10px;
  //    left: 20px;
  //    width: 20px;
  //    height: 20px;
  //    background: #fff;
  //    border-top: 1px solid #EFF3F5;
  //    border-right: 1px solid #EFF3F5;
  //    @include rotate(-45deg);
  //  }
}
.task-to-complete{
  padding: 0 0 10px 0;
  .task-title h3{
    margin: 7px 0;
  }
}
.drop-add-task{
  //  display: none;
  //  height: 0;
  //  overflow: hidden;
  //
  //  @include transitional(0.4s);
  //
  //  &.active{
  //    height: 130px;
  //  }

  .drop-add-border{
    padding-bottom: 20px;
    border-bottom: 1px solid #d2d2d2;

    .btn{
      margin-top: 10px;
    }
  }
}
.list-task{
  padding: 0;
  &.list-single-line{
    & > li:first-child{
      padding-top: 0;
    }
    & > li:last-child{
      border-bottom: 0;
    }
    & > li{
      padding: 10px 0;
    }
  }
  & > li{
    padding-top: 10px;
    padding-bottom: 5px;
    list-style: none;
    border-bottom: 1px solid #d2d2d2;
  }
  & > li:last-child{
    border-bottom: 0;
  }
  .remove,.option{
    font-size: 14px;
    opacity: 0;
    @include transitional(0.4s);
  }
  .task-view{
    display: block;
  }
  .task-edit{
    display: none;
    background: #eee;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
  }
  .task-edit-mode{
    padding: 15px;
    .task-view{
      display: none;
    }
    .task-edit{
      display: block;
    }
  }
}
.option-hover{
  .option{
    opacity: 0;
    @include transitional(0.3s);
  }
  &:hover{
    .option{
      opacity: 1;
    }
  }
}
.done{
  .title-task{
    text-decoration: line-through;
  }
}
.title-task {
  font-size: 16px;
  font-family: regular !important;
}

/*
  Feedback Button
*/
.feedback-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99;

  a {
    color: #68c3a3;
    font-size: 34px;
  }
}

/*
  Broadcast
*/
.broadcast-list{
  blockquote{
    padding: 5px 20px;
    border-left: 5px solid #b2ebc0;
  }
}
.broadcast-slider{
  .broadcast-list{
    display: none;
  }
}

/*
  Payroll icon
*/
.fa-payroll{
  position: relative;
  .fa-usd{
    position: absolute;
    font-size: 7px;
    z-index: 99;
    left: -6px;
    top: 5px;;
  }
}

/*
  Footer
*/
footer{
  width: 100%;
  bottom:0;
  @include transitional(0.5s);
  &.active{
    position: fixed;
  }
}
.platform-footer {
  padding: 60px 10px 30px;
  background: transparent;
}

.platform-footer .logo-mark {
  margin: 0 auto 5px;
  text-align: center;
  font-size: 30px;
  line-height: normal;
  letter-spacing: -.05em;
}

/*
  Menu Learn
*/
.menu-learn{
  padding: 0;
  li{
    display: block;
    list-style: none;
  }
  a{
    color: #428bca;
    text-decoration: underline;
    font-size: 14px;
  }
}
/*
  Pop over
*/

.popover{
  box-shadow: none;
  border-color:#d2d2d2;
  border-radius:3px;
}
.popover-content{
  h2{
    font-family: 'euphemia';
    font-weight: bold;
    margin-bottom: 20px;
  }
}
/*
  Staff page
*/
.staff-resend{
  .btn{
    width: 100%;
  }
}
.staff-grid-menu{
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 5px;
  //  z-index: 99;
  @include transitional(0.3s);

  .dropdown-menu{
    background: #2b2b2b;
    box-shadow: none;
    left: auto;
    right: -15px;
    z-index: 9;

    li > a,.btn-wrap {
      color: #fff;
      padding: 5px 15px;
      &:hover{
        background: transparent;
      }
    }
    .divider {
      margin: 5px 0;
      background-color: #4c4c4c;
    }
    &:before{
      position: absolute;
      content:"";
      height: 0;
      width: 0;
      top:-5px;
      right: 12px;
      border-top: 10px solid #2b2b2b;
      border-left: 10px solid #2b2b2b;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
      @include rotate(45deg);
    }
  }
}
.staff-grid-item{
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 20px;
  position: relative;

  &.active{
    border: 3px solid #f08343;
  }

  .txt-grey{
    font-size: 13px;
    line-height: 16px;
    display: block;
    //    height: 25px;
    //    overflow: hidden;
    //    text-overflow:ellipsis;
    //    white-space: nowrap;
    i{
      display: inline-block;
      margin-top: 5px;
    }
  }

  &.show-menu,
  &:hover{
    .staff-grid-menu{
      opacity: 1;
    }
  }
}
/*
  Team Total
*/
.team-total{
  text-align: center;
}

/*
  Custom Tab bar
*/
.tab-bar.profile-staff{
  //  background: #d7e1e6;
}
.profile-header{
  position: relative;
  margin: -20px -15px 0 -15px;
  padding: 20px;
  background: #f8fafb;
  border-radius: 6px 6px 0 0;
  .btn-close{
    color: #777;
    position: absolute;
    right: 20px;
    top:10px;
    display: none;
  }
}

/*
  Modal
*/
.modal{
  //  position: absolute;
  //  overflow: auto !important;
  //  overflow-x: hidden !important;
}
.modal-open{
  overflow: auto;
  margin-right: 0 !important;
}
.modal-content{
  border-radius: 4px;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.22);
  border: 1px solid #ccc;
}
.modal-backdrop{
  opacity: 0 !important;
}
.modal-header{
  border: 0;
}
.payslip-form {
  background: #FCF8F5;
  border: 1px solid #dad4d0;
  padding: 20px;
  border-radius: 4px;
  clear: both;
  overflow: hidden;
  display: table;
  width: 100%;

  .payslip-left,
  .payslip-body,
  .payslip-right{
    display: table-cell;
    height: 100%;
  }
  .payslip-left{
    width: 36px;
    background: url("../img/payslip-side-l.png") repeat-y center top;
  }
  .payslip-right{
    width: 36px;
    background: url("../img/payslip-side-r.png") repeat-y center top;
  }
  .payslip-body{
    padding: 20px;
    padding-top: 80px;
  }
  table.table,
  input{
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  input{
    padding: 0;
    margin: 0;
    font-size: 12px;
  }
  .label-sm{
    font-size: 11px;
    padding: 5px 10px;
    line-height: 10px;
    vertical-align: top;
    margin: 0;
  }
}

/*
  Element inline edit
*/
.inline-edit-wrap{
  position: relative;

  &.row{
    .modal-inline-edit{
    }
  }
  .modal{
    background:rgba(248,250,251,0.9);
  }
}
.modal-inline-edit{
  position: static;
  right: 20px;
  top: 0;
  color: #8A8A8A;

  &.btn{
    color: #fff;
  }
  .btn-sm{
    line-height: normal;
  }
}
.inline-edit-wrap:hover{
  .inline-edit,
  .inline-edit-right{
    opacity: 1;
  }
}
.inline-edit{
  opacity: 0;
  @include transitional(0.4s);
}
.inline-edit-right{
  position: absolute;
  right: 20px;
  top: 0;
  opacity: 0;
  @include transitional(0.4s);
}

// Setup checkbox
.setup-checkbox-wrap{
}

// Other Checkbox
.other-checkbox-wrap{
}
.other-checkbox-content{
  display: inline-block;
  //  width: 0px;
  //  overflow: hidden;
  @include transitional(0.5s);

  &.active{
    width: 200px;
    @include transitional(0.5s);
  }
  input{
    height: auto;
  }
}

// Grid box
.grid-container{
  margin: 0 -5px;
}
.grid-wrap{
  padding: 0 10px;

  &.active{
    .grid-box{
      border: 2px solid #ffaa0a;

      &:hover{
        border: 2px solid #ffaa0a;
      }
    }
  }
  .grid-box{
    position: relative;
    width: 100%;
    height: 0px;
    padding-top: 100%;
    border: 2px solid #bbb;
    border-radius: 5px;
    cursor: pointer;
    @include transitional(0.4s);

    &:hover{
      background: #f6f6f6;
    }
  }
  .grid-title{
    position: absolute;
    display: inline-block;
    width: 80%;
    bottom: 15%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    color: #777;
  }
  .grid-img{
    position: absolute;
    width: 35%;
    height: 35%;
    top:20%;
    left: 0;
    right: 0;
    margin: auto;
  }
  svg{
    width: 100%;
    height: 100%;

    circle,
    ellipse,
    polyline,
    path,
    line{
      stroke: #777;
      background: #777;
    }
  }
}

// Panel group accordion
.panel-group-accordion{
  border:1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  .panel:first-child{
    border-top: 0 !important;
  }
  .panel{
    border: 0;
    border-top: 1px solid #ddd;
    border-radius: 0;
  }
  .panel+.panel {
    margin-top: 0px;
  }
  .panel-heading{
    padding: 20px;
    background: #fafafa;
    border: 0;
    h4{
      cursor: pointer;
    }
  }
  .fa{
    vertical-align: middle;
  }
  .fa-chevron-down{
    margin-top: 2px;
    display: none;
  }
  .panel-title.collapsed{
    .fa-chevron-down{
      display: block;
    }
    .fa-chevron-up{
      display: none;
    }
  }
  .setup-checkbox-wrap .col-sm-9,
  .setup-checkbox-wrap .col-sm-11{
    padding-left: 5px;
  }
}
// Add boarding panel
.add-boarding-panel{
  width: 360px;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  box-shadow: none;
  top: 60px;

  &:before{
    position: absolute;
    content: "";
    right: 40px;
    top:-10px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    @include rotate(-45deg)
  }

  li{
    display: table-cell;
    width: 33%;
    &:hover a{
      background: transparent;
      color: #777;
    }
  }
  a:hover{
    opacity: 1;
    .ico-boarding-wrap{
      border: 1px solid #ccc;
    }
  }
  .ico-boarding-wrap{
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid transparent;
  }
  svg{
    margin-top: 15px;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
  }
}

// Chart
.chart-wrapper{
  position: relative;
  padding-top: 90%;
  height: 0;
  overflow: hidden;
  .chart{
    position: absolute;
    top:-20%;
    left:-20%;
  }
  .chart-text{
    position: absolute;
    top:50%;
    left: 50%;

    .chart-text-pos{
      margin-top: -32px;
      margin-left: -100%;
    }
  }
}
// Tooltip user photo
.popover{
  z-index: 999999;
}
.add-user-popover,
.user-photo-tooltip-wrap{
  display: inline-block;
}
.user-photo-tooltip{
  cursor: pointer;
}
.add-user-popover-panel{
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px dashed #777;
  border-radius:100%;
  color: #777;
  cursor: pointer;

  &:focus,
  &:visited{
    color: #777;
    outline:0;
  }
  &:hover,
  &.active{
    background: #777;
    color: #fff;
    border-style: solid;
  }
  .fa{
    display: inline-block;
    position: absolute;
    height: 16px;
    width: 12.5px;
    margin: auto;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
  }
  &.link{
    height: auto;
    width: auto;
    border: 0;
    color: #1c5c76;

    &:focus,
    &:visited{
      color: #1c5c76;
      outline:0;
    }
    &:hover,
    &.active{
      background: transparent;
      color: #1c5c76;
    }
  }
  &.mr5{
    margin-bottom: 10px;
  }
}
.popover + .add-user-popover-panel{
  background: #000;
}
.tooltip-user-photo{
  h4{
    margin-bottom: 0;
  }
  a{
    color: #aaa;
  }
}

// Popover add user
.popover-content{
  .add-user-popover-content{
    display: block;
  }
  .popover-user-close,
  .btn{
    width: 100%;
  }
}
.add-user-popover-content{
  display: none;
}

.select-user-popover-panel{
  .form-control{
    height: 38px;
  }
}
.popover-user-list-wrap{
  max-height: 250px;
  margin-right: -15px;
  margin-left: -15px;
  overflow-y: scroll;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;

  &.small-wrap{
    height: 120px;
  }

  table{
    width: 100%;
    tr{
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }
    td{
      padding: 10px !important;
    }
  }
  i.fa{
    display: inline-block;
    padding: 2px 2.8px;
    font-size: 10px;
    border: 1px solid #8A8A8A;;
    border-radius: 100%;
  }
  .popover-user-list-item:hover,
  .popover-user-list-item.active{
    background: #69b47b;
    border-bottom: 1px solid #8DD69E;

    span,
    i,
    a{
      color: #fff !important;
      border-color:#fff;
    }
  }
}

// Panel User
.centeredpanel{
  margin-top: 160px;
}
.panel-signup,
.panel-animated{
  background: #fff;
  border: 4px solid #d7e1e6;
  border-radius: 5px;
  box-shadow: 0 0 15px #CCC;
  .panel-form{
    padding: 40px ;
  }
}
.panel-green{
  border: 3px solid #00a264;
  background: #fff;
  border-radius: 5px;
}
.panel-login{
  max-width: 550px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid #00a264;
  border-radius: 5px;
  .col-sm-9,
  .col-sm-3{
    padding: 0;
  }
  .panel-form{
    padding: 10px 20px;
  }
  .panel-char{
    position: relative;
    height: 450px;
    background: #00a264;
  }
  .luna{
    position: absolute;
    height: 400px;
    left: 0px;
    bottom: 0;
    opacity: 0;
    @include transitional(0.5s);

    &.active{
      left: -80px;
      opacity: 1;
    }
  }
}
.animated .panel-label{
  @include transitional(0.5s);
  &.active{
    opacity: 1;
  }
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flipInX {
  0% {
  }
  100% {
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
  }
  100% {
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
/*
  Hover list
*/
.list-hover-area{

  &:hover{
    .list-hover-right{
      opacity: 1;
    }
  }
}
.list-hover-wrap{
  position: relative;
}
.list-hover-right{
  position: absolute;
  top: 0;
  right: 20px;
  opacity: 0;
  @include transitional(0.3s);
}
/*
  Jquery draggable
*/
.body.dragging, body.dragging * {
  cursor: move !important;
}
.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}
ol.example li.placeholder {
  position: relative;
}
ol.example li.placeholder:before {
  position: absolute;
}
// Table view
table{
  tr:last-child td{
    border-bottom-color: transparent;
  }
}
.table-view{
  display: table;
  .col-view{
    display: table-cell;
    vertical-align: middle;
  }
}
// Popover icon horizontal (x)
.popover-icon-x{
  display: table;
  text-align: center;
  margin: -10px -15px;
  .popover-icon-item{
    display: table-cell;
    padding: 15px;
    border-right: 1px solid #ccc;
    &:last-child{
      border-right: 0;
    }
  }
}
// Luna notice
#notice-luna{
  display: inline-block;
  position: fixed;
  left: 20px;
  bottom: -50%;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 1px 8px -4px #000;
  border-radius: 5px;
  @include transitional(0.4s);

  .luna-circle-wrap{
    height: 85px;
    img {
      margin-top: -25px;
    }
  }
}
// Hero video
.hero-video-panel{
  cursor: pointer;
  display: inline-block;
  border-radius: 5px;
  padding: 6px 20px;
  background: #00a264;
  &:hover{
    background: #69b47b;
  }
}
.hero-video {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  //  opacity: 0;
  @include transitional(0.5s);
  .wistia_embed{
    width: 100%;
    height: 100%;
  }
}
.hero-video-panel.pause{
  position: fixed;
  z-index: 1000;
  left: 20px;
  bottom: 20px;
}
// New homepage
.landing-testi-wrap{
  color: #fff;
  background: #00a264;
}
.bg-pattern{
  background: url("../img/img-pattern.png") repeat center;
}
.bg-white{
  background: #fff;
}
.bg-green{
  background: #00a264;
}
.bg-light-green{
  background: #69b47b;
}
.bg-brown-light{
  background: #fbfaf7;
}
.hero-landing{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f8fafb;
  overflow: hidden;
  @include transitional(0.5s);
}
.hero-intro{
  position: relative;
}
.intro-image{
  position: absolute;
  right: -320px;
  top:0px;
}
.hero-landing-bot,
.hero-landing-top{
  @include transitional(0.5s);
}
.panel-brown-border{
  background: #f6f4ef;
  border: 2px solid #d2d2d2;
}
// Typist
.typist-wrap{
  font-family: bold;
  text-align: center;
  min-height: 300px;
  padding-top: 60px;
  line-height: 50px;
  font-size: 40px;
}
.selectedText {
  font-style: normal;
}
@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

#typist-element {
  &:after {
    content: " ";
    display: inline-block;
    height: 38px;
    position: relative;
    top: 4px;
    line-height: 0;
    margin-left: 3px;
    margin-right: 7px;
    width: 3px;
    background: #444;
    animation: blink 1s step-start 0s infinite;
    -webkit-animation: blink 1s step-start 0s infinite;
  }
}

.selectedText {
  display: none;
}
// Stick header
.header-stick{
  position: fixed;
  top:0;
  width: 100%;
  padding: 10px 0;
  z-index: 500;
  background: #f8fafb;
  @include transitional(0.6s);
  &.active{
    top:0px;
  }
  a{
    color: #777;
  }
  a.btn:hover,
  a.btn:focus,
  a.btn:active{
    color: #777;
  }
  a.btn.btn-green{
    color: #fff;
    &:hover,
    &:active,
    &:focus{
      background: #00874f !important;
      color: #fff !important;
      opacity: 1;
    }
  }
  .btn{
    padding: 10px 15px;
    &:hover{
      background: #eee;
      opacity: 1;
    }
  }
}

// Article
article,
.article{
  h2{
    font-size: 36px;
    line-height: 50px;
  }
  h3{
    font-size: 26px;
    line-height: 40px;
  }
  h4{
    font-size: 21px;
    line-height: 30px;
  }
  ul{
    padding-left: 15px;
  }
  p {
    margin: 0 0 20px;
  }
}
.ul-default{
  padding: 0;
  & > li{
    list-style: none;
  }
}
.li-none{
  li{
    list-style: none;
  }
}

// Feature
.feature-item{
  position: relative;
  img{
    position: relative;
    left: 0;
    @include transitional(0.2s)
  }
}

// Fa color
.fa-red {
  color: #e14343;
}

// Product
#navbar-product{
  &.active{
    position: fixed;
    top: 110px;
  }
  li.active a{
    background-color: #00a264;
    color: #fff;
  }
  .nav>li>a{
    padding: 5px 10px;
    margin-bottom: 5px;
  }
}
.sidebar-product{
  display: inline-block;
}
.sidebar-stick{
  position: fixed;
}
.product-thumbnail{
  margin: 20px 0;
  img{
    width: 100%;
  }
}

// Tour
.tour-step-background{
  display: none;
}
.tour{
  &.left{
    margin-left: -15px;
    .pulse{
      top: -12px;
      left: 0;
    }
  }
}
.pulse {
  $size: 23px;
  display: inline-block;
  width: $size;
  height: $size;
  border-radius: $size / 2;
  border: 2px solid #f08343;
  box-shadow: 0 0px 6px rgba(0,0,0,0.25),
  inset 0 0px 3px rgba(0,0,0,0.3);
  position: relative;
  cursor: pointer;

  &:after {
    $size: 19px;
    position: absolute;
    content: '';
    width: $size;
    height: $size;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #f08343;
    border: 2px solid #fff;
    border-radius: 50%;
  }
}
//.scale {
//  -webkit-animation: myanim 5s infinite; /* Chrome, Opera 15+, Safari 5+ */
//  animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
//}
//@-webkit-keyframes myanim {
//  0%   { opacity: 0.0; }
//  50%  { opacity: 0.5; }
//  100% { opacity: 1.0; }
//}
//@keyframes myanim {
//  0%   { opacity: 0.0; }
//  50%  { opacity: 0.5; }
//  100% { opacity: 1.0; }
//}
.scale {
  animation: scale 1.5s infinite;
  -webkit-animation: scale 1.5s infinite;
}
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.93);
    -ms-transform: scale(0.93);
    transform: scale(0.93);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.tour-head-link-container{
  background: transparent;
  border: 0;
  .tour-head-link-wrap{
    background: #00a264;
    border: 0;
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
    animation: focusvertical 1.5s infinite;
    -webkit-animation: focusvertical 1.5s infinite;
  }
  .tour-head-link{
    position: relative;
    &:after{
      content: "";
      display: block;
      right: -22px;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 15px;
      width: 15px;
      position: absolute;
      background-color: #00a264;
      @include rotate(-45deg);
    }
  }
}

.tour-head-container{
  background: transparent;
  border: 0;
  .tour-head-wrap{
    background: #000;
    border: 0;
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
  }
  .tour-head-link{
    position: relative;
    &:after{
      content: "";
      display: block;
      right: -22px;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 15px;
      width: 15px;
      position: absolute;
      background-color: #000;
      @include rotate(-45deg);
    }
  }
}

@keyframes focusvertical {
  0% { margin-left: 0; }
  50% { margin-left: -10px; }
  100% { margin-left: 0; }
}
@-webkit-keyframes focusvertical {
  0% { margin-left: 0; }
  50% { margin-left: -10px; }
  100% { margin-left: 0; }
}
.popover.bottom {
  margin-top: 15px;
}
.tour-head-menu-container{
  position: relative;
  .tour-head-menu-img{
    position: absolute;
    bottom: -1px;
    left:-5px;
  }
  .pulse{
    position: absolute;
    left: -10px;
    top: -25px;
    z-index: 99;
  }
}
.tour-tour{
  .disabled{
    opacity: 1 !important;
  }
}
.tour-tour-1{
  z-index: 9999 !important;
}
.tour-popover{
  padding: 10px 15px;
}
.tour-head-menu,
.tour-menu{
  padding: 10px 10px 10px 70px;
  &.staff{
    padding: 10px 15px;
  }
}
.tour-welcome-wrap{
  position: absolute;
  background: transparent;
  box-shadow: none;
  border: 0 !important;
  left: 0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width: 100% !important;
  height: 100% !important;
}
.tour-welcome {
  position: fixed;
  z-index: 2000;
  background-color: #fff;
  border-radius: 5px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 800px;
  height: 550px;
  padding: 40px;
  overflow: hidden;
  .popover-navigation{
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  .owl-pagination{
    margin-top: 25px;
    text-align: center;
  }
  .owl-page {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    display: inline-block;
    margin: 3px;
    border-radius: 100%;
    &.active{
      background-color: #00a264;
    }
  }
}
.tour-welcome-cover {
  opacity: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  left: 0;
  top: 0;
  z-index: 1000;
}
.tour-step-backdrop{
  border: 0;
}
.tour-step-backdrop#welcome{
  opacity: 0;
  display: none;
  position: absolute;
}
#end-employment{
  z-index: 1145;
}
#change-personal-info{
  padding: 1px 0 20px 0;
}
.tour-active{
  overflow: hidden;
}
.tour-step-backdrop{
  border-radius: 20px;
  &.check-square-box{
    border:0;
  }
}
.tour-sidemenu{
  .nav-menu{
    z-index: 2000;
  }
}

// Page notif
.page-notification{
  &.table-view{
    width: auto;
  }
}

// Box border
.box-border{
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  svg{
    width:100%;
    max-width: 90px;
  }
}
.box-green-hover{

  &:hover{
    color: #fff;
    background: #69b47b;
    border: 1px solid #69b47b;
    path{
      fill: #fff;
    }
    a{
      color: #fff;
    }

  }
  &.active{
    color: #fff;
    background: #69b47b;
    border: 1px solid #69b47b;
    path{
      fill: #fff;
    }
    a{
      color: #fff;
    }

  }
}

// Form horizontal
.form-horizontal{
}

// Spesific panel
.selected-panel-wrap{
  .selected-panel{
    &.active{
      background: #00a264;
      border-color: #00a264;
      box-shadow: none;
      color: #fff;
    }
  }
}

// Policy list
.policy-list{
  .fa-chevron-up{
    display: none;
  }
}
/*
  /////////////////////////////////////
  Select2
  /////////////////////////////////////
*/
span.select2-selection__clear {
  padding: 0 10px;
  margin-right: 5px;
  line-height: 36px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear{
  line-height: 28px;
  margin-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #00a264;
  border: 1px solid #00a264;
  color: #fff;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 10px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 0;
  margin-left:10px;
  float: right;
}
.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #abb7b7;
  border-radius: 4px;
  cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 3px 10px 0 10px;
  width: 100%;
}
.select2-container .select2-selection--multiple {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}
/*
  /////////////////////////////////////
  Structure
  /////////////////////////////////////
*/
.structure-wrap{
  position: relative;
  li{
    position: relative;
    list-style: none;
  }
  ul li:nth-last-child(1) > .structure-item:after,
  ul li:nth-last-child(1) > .structure-item .structure-line-bot,
  ul li:nth-last-child(1) > ul:before,
  ul li:nth-last-child(1) > .structure-ul-line{
    display: none;
  }
  ul{
    padding-left: 90px;
    position: relative;
  }
  & > ul{
    padding: 0;
  }
  .structure-li.expand{
    & > .structure-ul{
      display: block;
    }
  }
  ul .structure-ul{
    display: none;
  }
  ul ul{
    .structure-ul-line{
      display: block;
    }
    .structure-item{
      position: relative;
      &:before{
        display: block;
        position: absolute;
        content: "";
        width: 2px;
        height: 10px;
        background-color: #ddd;
        top: -10px;
        left: -46px;
      }
      &:after{
        display: block;
        position: absolute;
        content: "";
        width: 2px;
        height: 10px;
        background-color: #ddd;
        bottom: -10px;
        left: -46px;
      }
    }
    ul ul{
      .structure-ul-line{
        left: -29px;
      }
      .structure-ul:before {
        left: -29px;
      }
    }
  }
  .structure-item{
    width: 100%;
    margin: 15px 0;
    display: table;
    border: 2px solid #ddd;
    border-radius: 5px;
    background: #fff;
    position: relative;
    z-index: 2;
    &.expand{
      .fa-minus{
        display: block;
      }
      .fa-plus{
        display: none;
      }
    }
  }
  .structure-img,
  .structure-content,
  .structure-option{
    display: table-cell;
    vertical-align: middle;
    padding: 15px;
  }
  .structure-img{
    width: 10px;
  }
  ul ul .structure-img{
    &:before{
      position: absolute;
      display: block;
      content: "";
      height: 2px;
      width: 46px;
      background-color: #ddd;
      left: -46px;
      top: 50%;
    }
  }
  .structure-ul-line{
    display: none;
    position: absolute;
    height: 100%;
    top: 0;
    width: 2px;
    background-color: #ddd;
    left: -44px;
    &:before,
    &:after{
      display: block;
      content: "";
      position: absolute;
      height: 10px;
      width: 2px;
      background: #ddd;
    }
    &:before{
      top:-8px;
    }
    &:after{
      bottom:-8px;
    }
  }
  .structure-option{
    padding-right: 15px;
    .btn{
      padding: 15px;
    }
  }
  .dropdown{
    ul{
      padding: 10px 0 !important;
      right: 0;
    }
  }
  .structure-custom-wrap {
    & > .structure-ul-line{
      display: none;
    }
  }
  .structure-custom{
    padding: 1px 15px;
    background-color: #eee;
    border-radius: 10px;
    z-index: 99;
    & > li > .structure-item:after,
    & > li > .structure-item:before,
    & > li > .structure-item .structure-img:before,
    & > li > .structure-item .structure-line-top,
    & > li > .structure-item .structure-line-bot{
      display: none;
    }
  }
  .structure-line-top,
  .structure-line-bot{
    display: block;
    position: absolute;
  }
  ul ul .structure-line-top{
    content: "";
    width: 2px;
    height: 50%;
    background-color: #ddd;
    top:0;
    left: -46px;
  }
  ul ul .structure-line-bot{
    content: "";
    width: 2px;
    height: 50%;
    background-color: #ddd;
    bottom:0;
    left: -46px;
  }
  .structure-panel {
    position: absolute;
    display: block;
    left: 34px;
    bottom: -11px;
    background-color: #fff;
    padding: 3px;
    border-radius: 100px;
    line-height: 0;
    border: 2px solid #ddd;
    height: 22px;
    width: 22px;
    text-align: center;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    &:hover{
      background: #ddd;
    }
    .fa-minus{
      display: none;
    }
  }

  ul ul ul .structure-item{
    .structure-img,
    .structure-content,
    .structure-option{
      padding: 10px;
    }
    .structure-panel{
      left: 24px;
    }
    .img-60,
    .img-60 img{
      width: 45px;
      height: 45px;
    }
    .img-60 .img-empty{
      width: 45px;
      height: 45px;
      span{
        font-size: 14px;
      }
    }
  }
  ul ul ul ul .structure-item{
    &:before,
    &:after{
      left: -31px;
    }
    .structure-line-top,
    .structure-line-bot{
      left: -31px;
    }
    .structure-img:before{
      width: 31px;
      background-color: #ddd;
      left: -31px;
    }
  }
  ul ul ul ul{
    padding-left: 65px;

  }
}

/*
  /////////////////////////////////////
  Rename list
  /////////////////////////////////////
*/
.rename-wrap{
  .rename-edit{
    display: none;
    .form-control{
      padding: 7px 10px;
      width: 100%;
    }
  }
  .rename-done-panel{
    display: none;
  }
  &.active{
    .rename-view,
    .rename-panel{
      display: none;
    }
    .rename-edit{
      display: block;
    }
    .rename-done-panel{
      display: inline-block;
    }
  }
}
// Feature
#feature-slide{
  .owl-pagination{
    margin-bottom:40px;
    text-align: center;
  }
  .owl-page {
    width: 10px;
    height: 10px;
    background-color: #ddd;
    display: inline-block;
    margin: 3px;
    border-radius: 100%;
    &.active{
      background-color: #00a264;
    }
  }
}
.leave-label {
  padding: 0 10px;
  margin: 0 5px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
}
.checkbox label{
  font-family: regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.list-link{
  .list-group-item{
    border-radius: 0;
  }
}

/*
  ///////////////////////////////////////////////////////
  ============== End Spesific UI Component ==============
  ///////////////////////////////////////////////////////
*/


/*
  ///////////////////////////////////////////////////////
  ================= Start Media Queries =================
  ///////////////////////////////////////////////////////
*/

/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px){
  footer{
    display: none;
  }
  .panel-green{
    .p30{
      padding: 15px;
    }
  }
  .container-lg{
    padding: 0;
  }
  .feature-item{
    text-align: center;
  }
  .typist-wrap{
    padding-top: 30px;
  }
  .tab-green{
    display: table;
    width:100%;
    & > li{
      display:table-cell;
      a{
        margin: 0 !important;
      }
    }
  }
  .form-horizontal .control-label{
    margin-bottom: 0 !important;
    padding-top: 10px;
  }
  .hero-landing-bot{
    padding: 50px 0;
  }
  .user-snap-wrap{
    display: none;
  }
  .full-xs{
    width: 100%;
  }
  .tac-xs{
    text-align: center;
  }
  .tab-green > li > a {
    font-size: 14px;
    padding: 10px 10px;
  }
  header{
    padding-top: 0;
  }
}

/* Small devices (tablets, 768px and up) */
@media (max-width:768px){
  .staff-grid-item{
    padding: 10px 15px;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius:0;
    margin-bottom:0;
    margin: 0 -15px;
    &.active{
      border: 0;
      border-bottom: 1px solid #ddd;
    }
    h4{
      margin-bottom: 5px !important;
    }
    .dropdown{
      display: none;
    }
  }
  .staff-grid > div:last-child .staff-grid-item{
    border-bottom: 0;
  }
  table{
    table-layout: auto;
  }
  thead > tr > th,
  tbody > tr > th,
  tfoot > tr > th,
  thead > tr > td,
  tbody > tr > td,
  tfoot > tr > td {
    padding: 8px 10px;
  }
  thead > tr > th:first-child,
  tbody > tr > td:first-child{
    padding-left: 0;
  }
  thead > tr > th:last-child,
  tbody > tr > td:last-child{
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .hr-right{
    border-right: 1px solid #d7e1e6;
  }
  .panel-login{
    .panel-form{
      padding: 20px 40px;
    }
  }
  .hide-xs{
    display: inline;
  }
  .btn-xs-full{
    width: auto;
  }
  header{
    margin-bottom: 20px;
  }
  .nav-sidebar-cover{
    display: none;
  }
  .col-menu-xs{
    display: none;
  }
  .user-snap{
    margin: 12px 0;
    cursor: pointer;
  }
  .user-greeting{
    display: inline-block;
  }
  .nav-sidebar{
    position: relative;
    left: 0;
    padding-top: 50px;
    padding-left:0px;
  }
  .header-task .drop-add-panel{
    float: right;
    font-size: 16px;
  }
  .list-task li{
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .nav-sidebar .nav-menu li a{
    padding: 15px 5px 12px 0;
  }
  .nav-menu.active{
    position: fixed;
    top:30px;
    padding: 0 1px;
  }
  .drop-add-task .drop-add-border .btn.reset-left-border{
    margin-left: -15px;
  }
  .drop-add-task.active{
    //    height: auto;
  }
  .notice-activity-log{
    .log{
      padding-left: 40px;
    }
  }
  .menu-learn{
    li{
      display: inline-block;
      padding: 0 10px;
      border-right: 1px solid #ccc;
    }
    li:last-child{
      border-right: 0;
    }
    li:first-child{
      padding-left: 0;
    }
  }
  .staff-grid > .col-md-4{
    height: 120px;
  }
  .staff-grid-item-wrap{
    display: block;
    position: relative;
    height: 100px;
    margin-bottom: 20px;
    &:hover{
      z-index: 9999;
      .staff-grid-item{
        min-height: 100px;
        height: auto;
        overflow: visible;
        .txt-grey{
          overflow: visible;
          white-space: inherit;
        }
      }
    }
  }
  .staff-grid-item{
    padding: 15px;
    height: 100px;
    overflow: hidden;
    h4{
      line-height: 20px;
      display: block;
      overflow: hidden;
      margin-bottom: 5px;
      width: 93px;
      max-height: 40px;
    }
    .txt-grey{
      display: block;
      height: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
  }
  .team-total{
    text-align: left;
  }

  .tab-bar {
    & > li > a {
      font-size: 16px;
      padding: 20px 30px;
      background: #d7e1e6;
      color: #8b9398;
    }
  }
  .staff-profile-name{
    font-size: 26px;
  }
  .header-content{
    text-align: left;
    .excerpt{
      display: block;
    }
  }
  .task-to-complete .task-title h3 {
    margin: 12px 0;
  }
  .payslip-form{
    min-height: 700px;
  }
  .tab-green > li > a {
    font-size: 16px;
    padding: 10px 27px;
    color: #777;
    background: #eee;
    border-radius: 0;
    font-family: bold;
  }
  .btn-add{
    background: #00a765;
    color: #FFF !important;
    border: 1px solid transparent;
    border-radius: 5px;
    width:auto;
    height:auto;
    padding:0px 15px ;
    line-height:auto;
    font-size:14px !important;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
  .list-task-empty{
    border-bottom: 0;
    padding: 0;
    padding-top: 5px;
  }
  .list-task-text{
    padding-left:0;

  }
  .task-view{
    margin:0;
  }
}
@media (min-width: 992px) {
  .modal-inline-edit{
    position: absolute;
  }
  .profile-header{
    margin: -20px -40px 0 -40px;
    .btn-close{
      display: block;
    }
  }
  hr.divider-25{
    margin-left: -25px;
    margin-right: -25px;
  }
  .panel-half{
    &:after{
      display: block;
      position: absolute;
      content: "";
      height: 100%;
      width: 1px;
      background: #ccc;
      top:0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
  .sidebar-stick{
    min-width: 210px;
  }
  .account-list{
    margin: 0 -40px -20px -40px;
  }
  .account-item{
    padding: 20px 40px;
    .account-thumbnail-wrap{
      width: 100px;
    }
    .initial{
      font-size: 30px;
    }
    img{
      width: 70px;
    }
  }
  .tab-link{
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .list-task{
    .list-task-text{
      padding-left: 0;
    }
  }
  .feature-img img{
    display: block;
  }
  #notice-luna.active{
    bottom: 20px;
  }
  .modal-dialog {
    width: 800px;
  }
  .modal-inline-edit{
    opacity:0;
    @include transitional(0.3s);
  }
  .inline-edit-wrap:hover .modal-inline-edit{
    opacity:1;
    @include transitional(0.3s);
  }

  .list-task li{
    &:hover .remove,
    &:hover .option{
      opacity: 1 !important;
    }
  }

  .product-thumbnail{
    &:nth-child(odd){
      padding-right: 30px;
    }
    &:nth-child(even){
      padding-left: 30px;
    }
  }
  .content{
    padding: 20px 40px 40px 40px;
  }
  .content-padder{
    margin: auto -40px;
  }
  .content-padder-border{
    margin: auto -40px;
    padding: 0 35px 20px 35px;
  }
  table{
    tr td:first-child,
    tr th:first-child{
      padding-left: 0;
    }
    tr td:last-child,
    tr th:last-child{
      padding-right: 0;
    }
  }
  .typist-wrap{
    padding-top: 70px;
    padding-bottom: 40px;
    text-align: left;
  }
  .nav-sidebar{
    display: block;
  }
  .task-to-complete{
    padding: 10px 40px 10px 40px;
  }
  .header-task,
  #collapseaddtask{
    padding:0;
  }
  .header-content{
    position: relative;
    padding: 20px 40px !important;
    h2{
      font-size: 36px;
    }
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}
.input-group-image{padding: 0; overflow: hidden;}